<template>
  <!-- 暂为假数据 -->
  <div class="robot-tab-cont">
    <div class="preach-box">
      <div class="preach-box-top">
        <ul class="nav-tab">
          <li :class="[{'active':preach === 'course'}]" @click="preach = 'course'">课程全揽</li>
          <li :class="[{'active':preach === 'appointment'}]" @click="preach = 'appointment'">在线约课</li>
<!--          <li :class="[{'active':preach === 'knowledge'}]" @click="preach = 'knowledge'">法律知识库</li>-->
        </ul>
      </div>
      <!-- 课程全揽内容 -->
      <div v-show="preach === 'course' ">
        <div class="search-box search-box2">
          <input type="text" name="" value="" placeholder="搜索档案文件">
          <button><i href="##" class="iconfont icon-sousuo"></i></button>
        </div>
        <div class="preach-table">
          <table>
            <thead>
            <tr>
              <th class="textL">课程名称</th>
              <th>课程类别</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="textL">人力资源社会保障部、教育部等九部门关于进</td>
              <td>政策解读</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">全国人民代表大会常务委员会关于专利等知识产权案件诉讼程序</td>
              <td>政策解读</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">浙江省电信设施建设和保护办法</td>
              <td>政策解读</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">中华人民共和国电信条例</td>
              <td>知识讲解</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">携号转网服务管理规定及其解读</td>
              <td>知识讲解</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">电子商务法及其解读</td>
              <td>知识讲解</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">中华人民共和国外商投资法</td>
              <td>知识讲解</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">电子商务法及其解读</td>
              <td>知识讲解</td>
              <td><a href="##">点击进入</a></td>
            </tr>

            </tbody>
          </table>
        </div>
        <!-- 分页 -->
        <div id="pageToolbar">
          <span class="fl number">总共256条数据</span>
        </div>
      </div>
      <!-- 在线约课内容 -->
      <div v-show="preach === 'appointment'">
        <div class="preach-course">
          <div class="course-box">
            <div class="icon1"></div>
            <div class="title">
              <h1>线上约课</h1>
              <p>Online about class</p>
            </div>
            <div class="cont">
              <p>线上约课，说明文字，注意事</p>
              <p>项等相关信息的描述。</p>
            </div>
            <a href="##" class="course-btn">立即线上约课</a>
          </div>
          <div class="course-box">
            <div class="icon2"></div>
            <div class="title">
              <h1>线下约课</h1>
              <p>Offline about class</p>
            </div>
            <div class="cont">
              <p>线下约课，说明文字，注意事</p>
              <p>项等相关信息的描述。</p>
            </div>
            <a href="##" class="course-btn">立即线下约课</a>
          </div>
          <img src="images/pap.png" class="figure"/>
        </div>
      </div>
      <!-- 法律知识库 -->
      <div v-show="preach === 'knowledge'">
        <div class="search-box search-box2">
          <input type="text" name="" value="" placeholder="搜索档案文件">
          <button><i href="##" class="iconfont icon-sousuo"></i></button>
        </div>
        <div class="preach-table">
          <table>
            <thead>
            <tr>
              <th class="textL">标题名称</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="textL">人力资源社会保障部、教育部等九部门关于进</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">全国人民代表大会常务委员会关于专利等知识产权案件诉讼程序</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">浙江省电信设施建设和保护办法</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">中华人民共和国电信条例</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">携号转网服务管理规定及其解读</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">电子商务法及其解读</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">中华人民共和国外商投资法</td>
              <td><a href="##">点击进入</a></td>
            </tr>
            <tr>
              <td class="textL">电子商务法及其解读</td>
              <td><a href="##">点击进入</a></td>
            </tr>

            </tbody>
          </table>
        </div>
        <!-- 分页 -->
        <div id="pageToolbar2">
          <span class="fl number">总共256条数据</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      preach:'course'
    }
  },
  methods:{
    clickPreachTab(preach, _this){
      if(this.preach !== preach){
        let classArray = document.querySelector(".nav-tab .active");
        classArray.removeAttribute("class");
        _this.className = "active";
        this.preach = preach;
      }
    }
  }
}
</script>